<script setup lang="ts">
defineOptions({
  name: "GIS",
  inheritAttrs: false,
});
import { onMounted, reactive, ref } from "vue";
import openlayersMap from "./components/openlayersMap.vue";
import QH from "./components/xl.json";
const queryParams = reactive({
  keywords: "",
});
const handleQuery = () => {};
const resetQuery = () => {};
const queryFormRef = ref();
const openlayersMapRef = ref();
//摄像头 定位列表
const pointList = [
  {
    longitude: 108.3114624,
    latitude: 22.82365602,
    name: "摄像头1",
    remark: "备注",
  },
  {
    longitude: 108.3224624,
    latitude: 22.82565602,
    name: "摄像头2",
    remark: "备注",
  },
];
//摄像头 定位列表
const pointList1 = [
  {
    longitude: 108.41789246,
    latitude: 22.89989708,
    name: "摄像头3",
    remark: "备注",
  },
  {
    longitude: 108.44913483,
    latitude: 22.96250291,
    name: "摄像头4",
    remark: "备注",
  },
  {
    longitude: 108.55728149,
    latitude: 22.97577922,
    name: "摄像头5",
    remark: "备注",
  },
];

const tool = ref(""); // 当前选中的工具
const tools = ref([
  // 工具集
  {
    value: "Point",
    label: "点",
  },
  {
    value: "LineString",
    label: "线",
  },
  {
    value: "Polygon",
    label: "多边形",
  },
  {
    value: "Circle",
    label: "圆",
  },
  {
    value: "Square",
    label: "正方形",
  },
  {
    value: "Rectangle",
    label: "长方形",
  },
  {
    value: "None",
    label: "退出绘制",
  },
  {
    value: "empty",
    label: "清空绘制图形",
  },
]);

const toPoint = () => {
  openlayersMapRef.value.toPoint();
};
const addoutline = () => {
  openlayersMapRef.value.addoutline(QH, pointList1);
};
const handleToolChange = (value: string) => {
  openlayersMapRef.value.changeDrawTool(value);
};

onMounted(() => {
  openlayersMapRef.value.initMap(pointList);
});
</script>
<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="keywords" label="关键字">
          <el-input
            v-model="queryParams.keywords"
            placeholder="角色名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item prop="keywords" label="绘制">
          <el-select
            v-model="tool"
            placeholder="绘制图形"
            style="width: 191px"
            @change="handleToolChange"
          >
            <el-option
              v-for="item in tools"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery"
            ><i-ep-search />搜索</el-button
          >
          <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
          <el-button @click="toPoint()"
            ><i-ep-refresh />定位到南宁中心</el-button
          >
          <el-button @click="addoutline()"><i-ep-refresh />geoJson</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="map-box">
      <openlayersMap ref="openlayersMapRef"></openlayersMap>
    </div>
  </div>
</template>

<style scoped lang="scss">
.map-box {
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #002634;
  width: 100%;
  height: calc(100vh - 145px );
}
</style>
